<div class="p-2">
  <span class="font-notoColorEmoji">📖</span>{{ 'PAC.MENU.HOME.StoryRanking' | translate: {Default: "Story Ranking"} }}
  <mat-button-toggle-group displayDensity="compact" ngmAppearance="outline" color="primary"
    [(ngModel)]="type"
    >
    <mat-button-toggle value="all">
      {{ 'PAC.MENU.HOME.All' | translate: {Default: "All"} }}
    </mat-button-toggle>
    <mat-button-toggle value="my">
      {{ 'PAC.MENU.HOME.My' | translate: {Default: "My"} }}
    </mat-button-toggle>
  </mat-button-toggle-group>
</div>
<div class="px-2 flex">
  <span class="flex-1 basis-3/5"></span>
  <div class="flex-1 basis-2/5 flex">
    <span class="flex-1 basis-1/2 mx-1"> PV </span>
    <span class="flex-1 basis-1/2 mx-1"> UV </span>
  </div>
</div>
<div class="px-2 flex-1 overflow-auto">
  @for (ranking of ranking$ | async; track ranking; let i = $index) {
  <div class="p-1 rounded-md flex gap-1 hover:bg-gray-100/50 dark:hover:bg-white/5">
    <div class="name flex-1 basis-3/5 overflow-hidden text-ellipsis whitespace-nowrap">
      <span class="ranking">{{ i + 1 }}</span>
      <a [routerLink]="['/story', ranking.entityId]" [title]="ranking.entityName">{{ ranking.entityName }}</a>
    </div>

    <div class="flex-1 basis-2/5 flex">
      <span class="flex-1 basis-1/2 mx-1">
        {{ ranking.pv }}
      </span>
      <span class="flex-1 basis-1/2 mx-1">
        {{ ranking.uv }}
      </span>
    </div>
  </div>
  }
</div>
